<!DOCTYPE html>
<html>
  <head>
    <title>Malarkey</title>
    <meta charset="utf-8">
    <style>
      .cursor:after {
        content: '';
        height: 100%;
        width: 0;
        border-left: 1px solid black;
      }
      .highlight {
        background: gray;
      }
    </style>
  </head>
  <body>
    <div class="x"></div>
    <div class="y"></div>
    <script src="../dist/malarkey.min.js"></script>
    <script>
      var CURSOR_CLASS = 'cursor';
      var HIGHLIGHT_CLASS = 'highlight';
      function addClass(elem, className) {
        elem.classList.add(className);
      }
      function removeClass(elem, className) {
        elem.classList.remove(className);
      }
      var xElem = document.querySelector('.x');
      var yElem = document.querySelector('.y');
      var x = malarkey(xElem, {
        typeSpeed: 200,
        loop: true
      });
      var y = malarkey(yElem, {
        typeSpeed: 200,
        loop: false
      });
      [
        { x: 'foo', y: 'bar' },
        { x: 'baz', y: 'qux' }
      ].forEach(function(text) {
        x.call(function() {
          addClass(xElem, CURSOR_CLASS);
          this();
        });
        x.type(text.x);
        x.call(function() {
          removeClass(xElem, CURSOR_CLASS);
          addClass(yElem, CURSOR_CLASS);
          var self = this;
          y.type(text.y);
          y.call(function() {
            self();
            this();
          })
        });
        x.pause(1000);
        x.call(function() {
          addClass(xElem, HIGHLIGHT_CLASS);
          addClass(yElem, HIGHLIGHT_CLASS);
          this();
        });
        x.pause(1000);
        x.call(function() {
          xElem.innerHTML = ''; // clear both elements immediately
          yElem.innerHTML = '';
          removeClass(xElem, HIGHLIGHT_CLASS);
          removeClass(yElem, HIGHLIGHT_CLASS);
          removeClass(yElem, CURSOR_CLASS);
          this();
        });
      });
    </script>
  </body>
</html>
